/* 创建、编辑笔记的编辑器高度 */
#note-editor .bytemd {
    @apply h-[60vh] min-h-[560px];
}

/* 创建、编辑博客、片段的编辑器高度 */
#content-editor .bytemd {
    @apply h-screen;
}

/* 编辑器编辑区域的最大宽度 */
.bytemd-editor .CodeMirror .CodeMirror-lines {
    @apply !max-w-[80vw];
}

.bytemd .CodeMirror,
.bytemd code,
.bytemd kbd {
    @apply !font-mono;
}

.bytemd-fullscreen {
    @apply !z-10 !h-screen;
}

.markdown-body {
    @apply prose prose-neutral !w-full !max-w-full dark:prose-invert;
}

.bytemd-loading {
    @apply flex flex-col items-center justify-center p-8 text-muted-foreground;
    min-height: 200px;
    gap: 12px;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid hsl(var(--border));
    border-top: 3px solid hsl(var(--primary));
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    font-size: 14px;
    color: hsl(var(--muted-foreground));
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.markdown-body a {
    @apply mx-1 inline-flex items-center gap-1 !no-underline;
}

.medium-zoom-image--opened {
    @apply z-30;
}

.medium-zoom-overlay {
    @apply z-20 !bg-background;
}

.markdown-body pre {
    @apply relative !my-0 whitespace-break-spaces !rounded-xl border !bg-background/50 text-primary;
}

.markdown-body code::-webkit-scrollbar {
    @apply h-1.5 w-1.5;
}

.markdown-body code::-webkit-scrollbar-thumb {
    background: hsl(var(--foreground) / 0.2);

    /* 滚动条圆角 需要同时设置 background-clip: padding-box;和border-radius */
    background-clip: padding-box;
    border-radius: 10px;
}

.markdown-body p code {
    @apply mx-2;
}

.markdown-body pre {
    @apply relative !my-0 !rounded-lg !p-0 text-primary;
}

.markdown-body pre > code {
    @apply mx-2 mt-12 !whitespace-pre-wrap !break-words text-base;
}

.markdown-body pre > .copy-code-button {
    @apply absolute right-4 top-0 z-[1] flex h-[40px] cursor-pointer items-center text-lg transition-opacity ease-in-out;
}

.markdown-body pre::after {
    content: attr(data-language);
    @apply absolute inset-x-0 top-0 border-b border-b-muted-foreground/20 bg-muted/30 px-4 py-2 text-sm font-medium text-muted-foreground;
}

.markdown-body iframe {
    @apply aspect-video w-full;
}

.markdown-body :where(h1, h2, h3, h4, h5, h6) {
    @apply flex scroll-mt-20 items-center;
}

/* 确保标题大小层次正确 - 避免使用.prose选择器防止循环依赖 */
.markdown-body h1,
[class*="prose"] .markdown-body h1,
[class*="prose"] h1 {
    font-size: 2.25rem !important; /* text-4xl */
    font-weight: 700 !important;
    line-height: 1.1 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
}

.markdown-body h2,
[class*="prose"] .markdown-body h2,
[class*="prose"] h2 {
    font-size: 1.875rem !important; /* text-3xl */
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
}

.markdown-body h3,
[class*="prose"] .markdown-body h3,
[class*="prose"] h3 {
    font-size: 1.5rem !important; /* text-2xl */
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.75rem !important;
}

.markdown-body h4,
[class*="prose"] .markdown-body h4,
[class*="prose"] h4 {
    font-size: 1.25rem !important; /* text-xl */
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}

.markdown-body h5,
[class*="prose"] .markdown-body h5,
[class*="prose"] h5 {
    font-size: 1.125rem !important; /* text-lg */
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
}

.markdown-body h6,
[class*="prose"] .markdown-body h6,
[class*="prose"] h6 {
    font-size: 1rem !important; /* text-base */
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.5rem !important;
}

.markdown-body :where(h1, h2, h3, h4, h5, h6):hover .markdown-anchor {
    @apply opacity-100;
}

.markdown-body :where(h1, h2, h3, h4, h5, h6) .markdown-anchor {
    @apply order-2 opacity-0 transition-opacity;
}

.markdown-body img {
    @apply mx-auto max-h-[40vh] rounded-lg border p-2;
}

/* 修复存在表格时，表格宽度溢出的问题 */
.markdown-body table thead th {
    @apply break-all;
}

/* 编辑器内标题样式 */
.cm-header {
    @apply !text-[#005cc5] dark:!text-[#79b8ff];
}

/* 编辑器内列表项样式 */
.cm-variable-2 {
    @apply !text-[#24292e] dark:!text-[#e1e4e8];
}

/* 编辑器内代码块样式 */
.cm-comment {
    @apply !text-[#032f62] dark:!text-[#9ecbff];
}

/* 编辑器内引用样式 */
.cm-quote {
    @apply !text-[#22863a] dark:!text-[#85e89d];
}

/* 编辑器内链接样式 */
.cm-link {
    @apply !text-[#22863a] dark:!text-[#85e89d];
}

/* 编辑器内图片链接样式 */
.cm-string {
    @apply !break-all !text-[#24292e] dark:!text-[#e1e4e8];
}

/* 编辑器内光标颜色 */
.CodeMirror-cursor {
    @apply !border-l-2 !border-l-[#204085] dark:!border-l-[#cee0fd];
}

/* 编辑器内显示行数 */
.CodeMirror-linenumber {
    @apply !text-foreground;
}

/* 编辑器内显示行数背景 */
.CodeMirror-gutters {
    @apply !border-r-muted !bg-background;
}

/* 下面代码的灵感来自这个Issue: https://github.com/pd4d10/hashmd/issues/40 */
/* ByteMD editor overrides	*/
.bytemd {
    @apply !rounded-xl !border-border !bg-background !text-foreground;
}

.bytemd-toolbar {
    @apply !rounded-none !border-border !bg-background;
}

.CodeMirror {
    @apply !bg-background !text-foreground;
}

.bytemd-split .bytemd-preview {
    @apply !border-l-border;
}

.bytemd-status {
    @apply !border-t-border;
}

.bytemd-toolbar-icon {
    @apply transition-all duration-100 hover:!bg-accent;
}
.bytemd-pretty-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--link-color, #3b82f6);
    padding: 0 2px;
    transition: all 0.2s ease;
}
.bytemd-pretty-link:hover {
    background-color: rgba(59, 130, 246, 0.1);
    border-radius: 4px;
}
.bytemd-pretty-link .link-container {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.bytemd-pretty-link .hover-link {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    border: 1px solid hsl(240, 8%, 15%);
}
.bytemd-pretty-link:hover .hover-link {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.bytemd-pretty-link .hover-link::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid rgba(0, 0, 0, 0.6);
}
.bytemd-pretty-link svg {
    display: inline-block;
    vertical-align: middle;
}

/* ========== 增强Markdown元素样式 ========== */

/* 段落样式 */
.markdown-body p,
[class*="prose"] .markdown-body p,
[class*="prose"] p {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    line-height: 1.7 !important;
}

/* 列表样式 */
.markdown-body ul,
.markdown-body ol,
[class*="prose"] .markdown-body ul,
[class*="prose"] .markdown-body ol,
[class*="prose"] ul,
[class*="prose"] ol {
    margin-top: 0.5rem !important;
    margin-bottom: 1rem !important;
    padding-left: 1.5rem !important;
}

.markdown-body li,
[class*="prose"] .markdown-body li,
[class*="prose"] li {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.6 !important;
}

.markdown-body ul > li,
[class*="prose"] .markdown-body ul > li,
[class*="prose"] ul > li {
    list-style-type: disc !important;
}

.markdown-body ol > li,
[class*="prose"] .markdown-body ol > li,
[class*="prose"] ol > li {
    list-style-type: decimal !important;
}

/* 嵌套列表样式 */
.markdown-body ul ul > li,
[class*="prose"] .markdown-body ul ul > li,
[class*="prose"] ul ul > li {
    list-style-type: circle !important;
}

.markdown-body ul ul ul > li,
[class*="prose"] .markdown-body ul ul ul > li,
[class*="prose"] ul ul ul > li {
    list-style-type: square !important;
}

/* 任务列表样式 */
.markdown-body .task-list-item,
[class*="prose"] .markdown-body .task-list-item,
[class*="prose"] .task-list-item {
    list-style-type: none !important;
    position: relative !important;
    padding-left: 0 !important;
}

.markdown-body .task-list-item input[type="checkbox"],
[class*="prose"] .markdown-body .task-list-item input[type="checkbox"],
[class*="prose"] .task-list-item input[type="checkbox"] {
    position: absolute !important;
    left: -1.5rem !important;
    top: 0.25rem !important;
    margin: 0 !important;
}

/* 引用块样式 */
.markdown-body blockquote,
[class*="prose"] .markdown-body blockquote,
[class*="prose"] blockquote {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding-left: 1rem !important;
    border-left: 4px solid hsl(var(--border)) !important;
    background-color: hsl(var(--muted) / 0.3) !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 1rem !important;
    border-radius: 0.5rem !important;
    font-style: italic !important;
    color: hsl(var(--muted-foreground)) !important;
}

.markdown-body blockquote p,
[class*="prose"] .markdown-body blockquote p,
[class*="prose"] blockquote p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 表格样式 */
.markdown-body table,
[class*="prose"] .markdown-body table,
[class*="prose"] table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    border: 1px solid hsl(var(--border)) !important;
}

.markdown-body th,
.markdown-body td,
[class*="prose"] .markdown-body th,
[class*="prose"] .markdown-body td,
[class*="prose"] th,
[class*="prose"] td {
    padding: 0.75rem 1rem !important;
    text-align: left !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    vertical-align: top !important;
}

.markdown-body th,
[class*="prose"] .markdown-body th,
[class*="prose"] th {
    background-color: hsl(var(--muted) / 0.5) !important;
    font-weight: 600 !important;
    color: hsl(var(--foreground)) !important;
}

.markdown-body tr:nth-child(even),
[class*="prose"] .markdown-body tr:nth-child(even),
[class*="prose"] tr:nth-child(even) {
    background-color: hsl(var(--muted) / 0.2) !important;
}

/* 分割线样式 */
.markdown-body hr,
[class*="prose"] .markdown-body hr,
[class*="prose"] hr {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    border: none !important;
    height: 2px !important;
    background: linear-gradient(to right, transparent, hsl(var(--border)), transparent) !important;
    border-radius: 1px !important;
}

/* 行内代码样式 */
.markdown-body code:not(pre code),
[class*="prose"] .markdown-body code:not(pre code),
[class*="prose"] code:not(pre code) {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 0.25rem !important;
    font-size: 0.875em !important;
    font-weight: 500 !important;
    border: 1px solid hsl(var(--border)) !important;
}

/* 强调文本样式 */
.markdown-body strong,
.markdown-body b,
[class*="prose"] .markdown-body strong,
[class*="prose"] .markdown-body b,
[class*="prose"] strong,
[class*="prose"] b {
    font-weight: 700 !important;
    color: hsl(var(--foreground)) !important;
}

.markdown-body em,
.markdown-body i,
[class*="prose"] .markdown-body em,
[class*="prose"] .markdown-body i,
[class*="prose"] em,
[class*="prose"] i {
    font-style: italic !important;
}

/* 删除线样式 */
.markdown-body del,
.markdown-body s,
[class*="prose"] .markdown-body del,
[class*="prose"] .markdown-body s,
[class*="prose"] del,
[class*="prose"] s {
    text-decoration: line-through !important;
    opacity: 0.7 !important;
}

/* 键盘按键样式 */
.markdown-body kbd,
[class*="prose"] .markdown-body kbd,
[class*="prose"] kbd {
    background-color: hsl(var(--muted)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-bottom: 2px solid hsl(var(--border)) !important;
    border-radius: 0.25rem !important;
    padding: 0.125rem 0.375rem !important;
    font-size: 0.875em !important;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace !important;
    box-shadow: inset 0 -1px 0 hsl(var(--border)) !important;
}

/* 上下标样式 */
.markdown-body sub,
.markdown-body sup,
[class*="prose"] .markdown-body sub,
[class*="prose"] .markdown-body sup,
[class*="prose"] sub,
[class*="prose"] sup {
    font-size: 0.75em !important;
    line-height: 0 !important;
    position: relative !important;
    vertical-align: baseline !important;
}

.markdown-body sup,
[class*="prose"] .markdown-body sup,
[class*="prose"] sup {
    top: -0.5em !important;
}

.markdown-body sub,
[class*="prose"] .markdown-body sub,
[class*="prose"] sub {
    bottom: -0.25em !important;
}

/* 高亮文本样式 */
.markdown-body mark,
[class*="prose"] .markdown-body mark,
[class*="prose"] mark {
    background-color: hsl(var(--warning) / 0.3) !important;
    color: hsl(var(--warning-foreground)) !important;
    padding: 0.125rem 0.25rem !important;
    border-radius: 0.25rem !important;
}

/* 详情/摘要样式 */
.markdown-body details,
[class*="prose"] .markdown-body details,
[class*="prose"] details {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 0.5rem !important;
    padding: 1rem !important;
    background-color: hsl(var(--muted) / 0.2) !important;
}

.markdown-body summary,
[class*="prose"] .markdown-body summary,
[class*="prose"] summary {
    cursor: pointer !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    user-select: none !important;
}

.markdown-body details[open] summary,
[class*="prose"] .markdown-body details[open] summary,
[class*="prose"] details[open] summary {
    margin-bottom: 1rem !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    padding-bottom: 0.5rem !important;
}
